import React from 'react';
import { Spin } from 'antd';
import { WeaSelect, WeaLocaleProvider } from 'ecCom';
import ChartPanel from '../../../public/chartpanel/ChartPanel';
import * as teamPortrait from '../../../apis/portrait/teamPortrait';
import * as Util from "../../../util/Util"

const getLabel = WeaLocaleProvider.getLabel;

export default class TeamPortraitIndex extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isloading: false,
            goalDataLoading: false,  // 目标数据是否正在加载
            taskDataLoading: false, // 任务数据是否正在加载
            performanceDataLoading: false, // 绩效数据是否正在加载
            goalOptions: [
                { key: '0', showname: getLabel(332, '全部') },
                { key: '1', showname: getLabel(19398, '月度') },
                { key: '2', showname: getLabel(17495, '季度') },
                { key: '3', showname: getLabel(17138, '年度') },
                { key: '4', showname: getLabel(390757, '三年') },
                { key: '5', showname: getLabel(390758, '五年') },
            ],
            goalSelectedOption: '1',
            goalDatas: {
                data: [],
                finishrate: '0',
                passrate: '0',
            },
            taskDatas: {
                data: [],
                finishrate: '0',
                passrate: '0',
            },
            performanceDatas: {
                data: [],
                passrate: '0',
            },
            ...props
        };
    }

    componentWillMount() {
        // 请求接口数据
        this.getPageDatas();
    }

    componentWillReceiveProps(newProps) {
        if (!_.isEqual(this.props, newProps)) {
            this.setState({
                ...this.state,
                ...newProps,
            }, () => {
                this.getPageDatas();
            });
        }
    }

    // 获取页面展示数据
    getPageDatas = () => {
        const { subId, deptId } = this.state
        if (!_.isEmpty(subId) || !_.isEmpty(deptId)) {
            Promise.all([this.getGoalDatas(), this.getTaskDatas(), this.getPerformanceDatas()])
        }
    }

    getGoalDatas = () => {
        return new Promise((rs) => {
            // 获取目标数据
            const { goalSelectedOption, subId, deptId, includeSub } = this.state
            this.setState({
                goalDataLoading: true
            })
            teamPortrait.getExecAssessData({ operation: '1', period: goalSelectedOption, subid: subId, deptid: deptId, includesub: includeSub ? "1" : "0" }).then((res) => {
                if (res.status == 1) {
                    this.setState({
                        goalDatas: {
                            data: res.data.map(d => ({ ...d, percent: parseFloat(`${d.percent}` + "") })),
                            finishrate: res.finishrate,
                            passrate: res.passrate
                        },
                        goalDataLoading: false
                    });
                }
                rs();
            });
        })
    }

    getTaskDatas = () => {
        return new Promise((rs) => {
            // 获取任务数据
            const { subId, deptId, includeSub } = this.state
            this.setState({
                taskDataLoading: true
            })
            teamPortrait.getExecAssessData({ operation: '2', subid: subId, deptid: deptId, includesub: includeSub ? "1" : "0" }).then((res) => {
                if (res.status == 1) {
                    this.setState({
                        taskDatas: {
                            data: res.data.map(d => ({ ...d, percent: parseFloat(`${d.percent}` + "") })),
                            finishrate: res.finishrate,
                            passrate: res.passrate
                        },
                        taskDataLoading: false
                    });
                }
                rs();
            });
        })
    }

    getPerformanceDatas = () => {
        return new Promise((rs) => {
            // 获取绩效数据
            const { subId, deptId, includeSub } = this.state
            this.setState({
                performanceDataLoading: true
            })
            teamPortrait.getExecAssessData({ operation: '3', subid: subId, deptid: deptId, includesub: includeSub ? "1" : "0" }).then((res) => {
                if (res.status == 1) {
                    let { data, passrate } = res
                    let formatedDatas = []
                    data.forEach(d => {
                        formatedDatas.push({
                            category: getLabel('522405', '平均绩效'),
                            xd: d.month,
                            yd: parseFloat(parseFloat(d.avgScore).toFixed(1) + "") 
                        })
                        formatedDatas.push({
                            category: getLabel(28309, '我的绩效'),
                            xd: d.month,
                            yd: parseFloat(parseFloat(d.myScore).toFixed(1) + "") 
                        })
                    })

                    this.setState({
                        performanceDatas: {
                            data: formatedDatas,
                            passrate,
                        },
                        performanceDataLoading: false
                    });
                }
                rs();
            });
        })
    }

    onGoalSelectedOptionChange = (value) => {
        this.setState({
            goalSelectedOption: value
        }, () => {
            this.getGoalDatas()
        });
    }

    render() {
        const { goalOptions, goalSelectedOption, goalDatas, taskDatas, performanceDatas, goalDataLoading, taskDataLoading, performanceDataLoading } = this.state;
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@brhh49`} spinning={false}>
                <div className="wea-workrelate-team-portrait-exec-assess">
                    <div className="stat-endinfo">
                        {`${getLabel('523864','数据统计截止到')} ${Util.getLastDateStr()} 23:59:59`}
                    </div>
                    <div className="task-goal-wrapper">
                        <div className="goal-wrapper">
                            <ChartPanel ecId={`${this && this.props && this.props.ecId || ''}_ChartPanel@ha45pe`}
                                charts={[
                                    {
                                        type: 'pie',
                                        width: '100%',
                                        height: 400,
                                        title: getLabel('522406', '目标完成率'),
                                        data: goalDatas.data,
                                        slogan: [
                                            getLabel('522406', '目标完成率') + "${completerate}&nbsp;&nbsp;&nbsp;&nbsp;" + getLabel('522652','超过${passrat}的其他部门') ,
                                            {
                                                completerate: {
                                                    label: `${goalDatas.finishrate}%`,
                                                    color: '#1589DD',
                                                },
                                                passrat: {
                                                    label: `${goalDatas.passrate}%`,
                                                    color: '#DB8A2B',
                                                },
                                            },
                                        ],
                                        rightLegend: { // 只有当chart.slogan不为空时才设置该属性，用于设置legend的宽高
                                            width: '40%',
                                            itemWidth: '60%', // itemWidth是相对于width而言
                                            itemHeight: 50,
                                        },
                                        noborder: true,
                                        loading: goalDataLoading,
                                        extraCom: <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@d5o1bv@goalperior`} style={{ width: 80 }} options={goalOptions} value={goalSelectedOption} onChange={this.onGoalSelectedOptionChange} />,
                                    },
                                ]}
                            />
                        </div>
                        <div className="task-wrapper">
                            <ChartPanel ecId={`${this && this.props && this.props.ecId || ''}_ChartPanel@w5h43u`}
                                charts={[
                                    {
                                        type: 'pie',
                                        width: '100%',
                                        height: 400,
                                        title: getLabel('31338', '任务完成率'),
                                        data: taskDatas.data,
                                        slogan: [
                                            getLabel('31338', '任务完成率') + "${completerate}&nbsp;&nbsp;&nbsp;&nbsp;" + getLabel('522652','超过${passrat}的其他部门') ,
                                            {
                                                completerate: {
                                                    label: `${taskDatas.finishrate}%`,
                                                    color: '#1589DD',
                                                },
                                                passrat: {
                                                    label: `${taskDatas.passrate}%`,
                                                    color: '#DB8A2B',
                                                },
                                            },
                                        ],
                                        rightLegend: {
                                            width: '40%',
                                            maxWidth: 150,
                                            itemWidth: 70,
                                            itemHeight: 50,
                                        },
                                        noborder: true,
                                        loading: taskDataLoading
                                    }
                                ]}
                            />
                        </div>
                    </div>

                    <ChartPanel ecId={`${this && this.props && this.props.ecId || ''}_ChartPanel@jbpmh4`}
                        charts={[
                            {
                                type: 'line',
                                width: '100%',
                                height: 400,
                                title: getLabel('522408', '近一年工作绩效平均得分'),
                                slogan: [
                                    getLabel('522653','近一年平均绩效超过${passrat}的其他部门') ,
                                    {
                                        passrat: {
                                            label: `${performanceDatas.passrate}%`,
                                            color: '#DB8A2B',
                                        },
                                    },
                                ],
                                data: performanceDatas.data,
                                noborder: true,
                                loading: performanceDataLoading
                            },
                        ]}
                    />
                </div>
            </Spin>
        );
    }
}
